<template>
	<div class="score">
		<h5>培训评价</h5>
		<p>请对本次培训做出评价吧</p>

		<van-rate v-model="state.form.star_num" :size="40" color="#ffd21e" void-icon="star" void-color="#F5F5F5" />

		<div class="content">
			<textarea v-model="state.form.content" placeholder="写其他意见和建议"></textarea>
			<div class="">
				<van-uploader
					v-model="state.fileList"
					:max-count="1"
					:after-read="afterRead"
					:before-delete="beforeDelete"
					lazy-load
					preview-size="40"
				>
					<img class="add_img" src="@/assets/img/my/add_img.png" alt="" />
					<template #preview-delete>
						<van-icon name="clear" color="#F0F0EF" size="14px" />
					</template>
				</van-uploader>
			</div>
		</div>

		<span>满意的话请打五星奥，谢谢您的支持！</span>

		<van-button class="btn van-safe-area-bottom" type="primary" size="large" v-debounce="submit">{{
			state.item ? '修改' : '提交评价'
		}}</van-button>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useMainStore } from '@/store/index';
import { uploadImage, deleteImage } from '@/api/common';
import { addEvaluation, editEvaluation } from '@/api/my';
import { Toast } from 'vant';

const imgUrl = import.meta.env.VITE_IMG_URL;
const mainStore = useMainStore();
const router = useRouter();
const route = useRoute();
const state = reactive<any>({
	form: {
		user_id: mainStore.user_id,
		star_num: 0,
		img: '',
		content: '',
		type: mainStore.storeIsLogin ? 1 : 0
	},
	value: 0,
	fileList: [],
	item: null
});

onMounted(() => {
	if (route.query.item) {
		const item = JSON.parse(route.query?.item as string) || null;

		state.item = item;
		const { star_num, img, content, type } = item;
		Object.assign(state.form, { star_num, img, content, type });
		if (img) {
			state.fileList[0] = { url: imgUrl + img };
		}
	}
	console.log(state.item);
});

const submit = async () => {
	state.form.img = state.fileList[0]?.url || '';
	if (state.item) {
		state.form.id = state.item.id;
		await editEvaluation(state.form);
		Toast.success('修改成功');
	} else {
		await addEvaluation(state.form);
		Toast.success('提交成功');
	}

	setTimeout(() => {
		router.go(-1);
	}, 2000);
};

// 上传图片
const afterRead = async (file: any, { index }: any) => {
	const res = await uploadImage(file.file);
	state.fileList[index].url = res.data;
};
// 删除图片
const beforeDelete = async (file: any): Promise<boolean> => {
	await deleteImage(file.url);
	return true;
};
</script>

<style lang="scss" scoped>
:deep(.van-uploader) {
	width: calc(100% - 48px);
	overflow: scroll;
	position: initial;
	.van-uploader__wrapper {
		flex-wrap: initial;
	}
	.van-uploader__preview {
		margin-bottom: 0;
		img {
			border-radius: 5px;
		}
	}
	.van-uploader__input-wrapper {
		position: absolute;
		bottom: 10px;
		right: 15px;
	}
	.van-uploader__preview-delete {
		display: flex;
		top: 2px;
		right: 2px;
	}
}
.score {
	@include flx-direction-center;
	padding: 0 30px;
	h5 {
		margin-top: 70px;
		color: #454545;
		font-size: 24px;
		font-weight: bold;
	}
	p {
		margin-top: 15px;
		margin-bottom: 35px;
		padding-bottom: 10px;
		border-bottom: 1px dashed #989898;
		color: #454545;
		font-size: 14px;
		font-weight: 400;
	}
	.content {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		margin-top: 45px;
		margin-bottom: 25px;
		border-radius: 10px;
		background: #f5f5f5;
		textarea {
			width: 100%;
			height: 92px;
			margin-bottom: 10px;
			color: #bcbcbc;
			font-size: 14px;
			border: none;
			resize: none;
			background: none;
			&::-webkit-input-placeholder {
				color: #bcbcbc;
			}
		}

		.add_img {
			width: 40px;
			height: 40px;
		}
	}
	span {
		color: #989898;
		font-size: 14px;
	}
	.btn {
		height: 45px;
		margin-top: 100px;
		margin-bottom: 50px;
		border-radius: 23px;
		border: none;
		background: linear-gradient(267deg, #f53d7d, #fb56b3);
	}
}
</style>
